<template>
  <div class="toolWarp">
     <!--    tab栏目-->
    <div class="toolPanel" v-if="activeComponent.type == 'tab'">
      <tab></tab>
    </div>
<!--    首页头部-->
    <div class="toolPanel" v-if="activeComponent.type == 'shopHeader'">
      <shop-top></shop-top>
    </div>
<!--    文本控件-->
    <div class="toolPanel" v-if="activeComponent.type == 'text'">
      <text-tool></text-tool>
    </div>
<!--    视频控件-->
    <div class="toolPanel" v-if="activeComponent.type == 'videoBox'">
      <video-tool></video-tool>
    </div>
<!--    图文控件-->
    <div class="toolPanel" v-if="activeComponent.type == 'imageText'">
      <image-text></image-text>
    </div>
    <!--图文导航-->
    <div class="toolPanel" v-if="activeComponent.type == 'imageTextNav'">
      <image-text-nav></image-text-nav>
    </div>
    <!--铺助分割-->
    <div class="toolPanel" v-if="activeComponent.type == 'assistDiv'">
      <assist-div-tool></assist-div-tool>
    </div>
<!--    自定义控件-->
    <div class="toolPanel" v-if="activeComponent.type == 'custom'">
      <custom-tool></custom-tool>
    </div>
<!--    品牌列表-->
    <div class="toolPanel" v-if="activeComponent.type == 'brandList'">
      <brand-list></brand-list>
    </div>
<!--    图文列表-->
    <div class="toolPanel" v-if="activeComponent.type == 'imageTextList'">
      <image-text-list></image-text-list>
    </div>
<!--    优惠券-->
    <div class="toolPanel" v-if="activeComponent.type == 'coupon'">
      <coupon-tool></coupon-tool>
    </div>
<!--    类别列表-->
    <div class="toolPanel" v-if="activeComponent.type == 'categoryList'">
      <category-list></category-list>
    </div>
<!--    商品列表-->
    <div class="toolPanel" v-if="activeComponent.type == 'productList'">
      <product-list></product-list>
    </div>
<!--    店铺头部-->
    <div class="toolPanel" v-if="activeComponent.type == 'shopHead'">
      <shop-head-tool></shop-head-tool>
    </div>
    <!--    秒杀专区-->
    <div class="toolPanel" v-if="activeComponent.type == 'groupList'">
      <group-tool></group-tool>
    </div>
<!--    秒杀专区-->
    <div class="toolPanel" v-if="activeComponent.type == 'spikeList'">
      <spike-tool></spike-tool>
    </div>
<!--    折扣列表-->
    <div class="toolPanel" v-if="activeComponent.type == 'discountList'">
      <discount-tool></discount-tool>
    </div>
  </div>
</template>
<script>

import tab from './BasicsComp/tab'
import shopTop from './BasicsComp/shopTop'
import textTool from './BasicsComp/textTool'
import videoTool from './BasicsComp/videoTool'
import imageText from './BasicsComp/imageText'
import customTool from './BasicsComp/customTool'
import brandList from './BasicsComp/brandList'
import imageTextList from './BasicsComp/imageTextList'
import couponTool from './MarketingComp/couponTool'
import categoryList from './goodsComp/categoryTool'
import productList from './goodsComp/productList'
import { mapGetters } from 'vuex'
import ImageTextNav from './BasicsComp/imageTextNav'
import AssistDivTool from './BasicsComp/assistDiv'
import shopHeadTool from './shopComp/shopHeadTool'
import spikeTool from './shopComp/spikeTool'
import discountTool from './shopComp/discountTool'
import GroupTool from './shopComp/groupTool'
  export default {
    name: 'toolPanel',
    components: {
      tab,
      GroupTool,
      AssistDivTool,
      ImageTextNav,
      shopTop,
      textTool,
      videoTool,
      imageText,
      customTool,
      brandList,
      imageTextList,
      couponTool,
      categoryList,
      productList,
      shopHeadTool,
      spikeTool,
      discountTool
    },
    data () {
      return {
      }
    },
    computed: {
      ...mapGetters([
        'activeComponent',
        'typeId'
      ])
    }
  }
</script>

<style lang="scss" scoped>
  .toolWarp{
    width: 320px;
  }
  .toolPanel {
    width: 320px;
  }
  .toolPanel::-webkit-scrollbar {
    width: 4px;
    height: 1px;
  }

  .toolPanel::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 5px rgba(156, 148, 148, 0.2);
    background: #cdcdcd;
  }
  .toolPanel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(158, 150, 150, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }
</style>
